<template>
  <div class="w-1/1 h-25vw">
    <div id="mse"></div>
  </div>
</template>

<script setup lang="ts" name="player">
import Player from "xgplayer";
import "xgplayer/dist/index.min.css";
import { onMounted, ref } from "vue";

const player = ref<Player>();

const changePlayer = async (data: { url: string; cover: string }) => {
  player.value?.setConfig({ url: data.url, poster: data.cover });
};

onMounted(() => {
  player.value = new Player({
    id: "mse",
    url: "",
    height: "100%",
    width: "100%"
  });
});

defineExpose({
  changePlayer
});
</script>
